<!-- src/pages/ArticleDetail.vue -->
<template>
    <v-container>
      <v-card>
        <v-card-item>
          <v-card-title>{{ article.title }}</v-card-title>
          <v-card-subtitle>{{ article.author }}</v-card-subtitle>
        </v-card-item>
        
        <template v-slot:text>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!
        </template>
  
      </v-card>
  
      <div id="commento" class="mt-5"></div>
  
    </v-container>
  
  </template>
  
  <script>
  import { mapState, mapActions } from 'vuex'
  
  export default {
    name: 'ArticleDetail',
    data() {
      return {
        article: {},
      }
    },
    created() {
      this.fetchArticle()
    },
    mounted() {
      this.loadCommento(); // 确保组件渲染完成后再加载 Commento
    },
    methods: {
      ...mapActions(['fetchArticles']),
      fetchArticle() {
        const articleId = this.$route.params.id
        // 假设 fetchArticles 已获取所有文章，可以从中找到
        const found = this.$store.state.articles.find(a => a.id === parseInt(articleId))
        if (found) {
          this.article = found
        } else {
          // 通过 API 获取单篇文章
          this.$axios.get(`/api/articles/${articleId}`).then(response => {
            this.article = response.data
          })
        }
      },
      loadCommento() {
        // 引入 Commento 脚本
        const script = document.createElement('script')
        script.src = 'https://cdn.commento.io/js/commento.js'
        script.async = true
        document.getElementById('commento').appendChild(script)
      },
    },
  }
  </script>
  
  <style scoped>
  /* 自定义样式 */
  </style>
  